import { defineComponent, onMounted, reactive } from "vue";
import styles from "./ImportXml.module.less";
import { useStore as useAnalysisStore } from "@/store/analysis";
import { UploadOutlined } from "@ant-design/icons-vue";
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import to from "await-to-js";
import { message } from "ant-design-vue";
import museXmlDealClass from "@/common/utils/museXmlDeal";
export default defineComponent({
  setup() {
    const analysisStore = useAnalysisStore();
    const beforeUploadXml = () => {
      return false;
    }
    const dealFile = async () => {
      if (!analysisStore?.file?.xml?.originFileObj) {
        message.error("请上传xml文件");
        return;
      }
      const urlXml = URL.createObjectURL(analysisStore?.file?.xml?.originFileObj);
      const [err, res] = await to(fetch(urlXml));
      if (!err) {
        const xmlRes: string = await res?.text() || "";
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlRes, "text/xml");
        const museXmlDealInstance = new museXmlDealClass(xmlDoc);
        const obj = await museXmlDealInstance.deal();
        if(!obj) {
          return;
        }
        analysisStore.setXmlData(obj.measures);
        if(!obj.score_tone) {
          message.error("曲谱调号获取错误!");
        }
        analysisStore.tone.score_tone = obj.score_tone;
        analysisStore.tone.chord_tone = obj.score_tone;
      }
    }
    return () => (
      <div class={styles.flows}>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第一步</div>
          <span>上传xml文件</span>
        </div>
        <div class={styles['step-content']}>
          <a-upload
            file-list={analysisStore?.file?.xml ? [analysisStore?.file?.xml] : []}
            onChange={(e) => {analysisStore.file.xml = e?.fileList[0]}}
            before-upload={beforeUploadXml}
            maxCount={1}
          >
            <a-button>
              <UploadOutlined />
              <span>点击上传xml文件</span>
            </a-button>
          </a-upload>
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第二步</div>
          <span>解析文件</span>
        </div>
        <div class={styles['step-content']}>
          <a-button type="primary" onClick={() => {
            dealFile();
          }}>点击解析文件</a-button>
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第三步</div>
          <span>和弦调号</span>
        </div>
        <div class={styles['step-content']}>
          <a-input style={{width: "300px"}} v-model:value={analysisStore.tone.chord_tone} placeholder="请输入和弦调号"/>
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>结果</div>
          <span>解析生成的数据格式展示</span>
        </div>
        <div class={styles['step-content']}>
          <div class={styles['result-content']}>
            <VueJsonPretty data={analysisStore.xmlData} />
          </div>
        </div>
      </div>
    )
  }
})